<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>blogList</title>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <link rel="stylesheet" href="../../static/css/bootstrap.css"
          th:href="@{css/bootstrap.css}">
    <link rel="stylesheet" href="../../static/css/font-awesome.css"
          th:href="@{css/font-awesome.css}">


    <script src="../../static/js/jquery.js" th:src="@{js/jquery.js}"></script>
    <script src="../../static/commonjs/crud.js" th:src="@{commonjs/crud.js}"></script>
    <script src="../../static/commonjs/mylaydate.js" th:src="@{commonjs/mylaydate.js}"></script>
    <script src="../../static/js/bootstrap.js" th:src="@{js/bootstrap.js}"></script>
    <script src="../../static/plugins/laydate/laydate.js" th:src="@{plugins/laydate/laydate.js}"></script>
    <script src="../../static/plugins/layer/layer.js" th:src="@{plugins/layer/layer.js}"></script>

    <!-- bootstrap-table -->
    <link rel="stylesheet" href="../../static/css/bootstrap-table.css" th:href="@{css/bootstrap-table.css}">
    <script src="../../static/js/bootstrap-table.min.js" th:src="@{js/bootstrap-table.min.js}"></script>
    <script src="../../static/js/bootstrap-table-zh-CN.js" th:src="@{js/bootstrap-table-zh-CN.js}"></script>
    <script src="../../static/plugins/bootstrap-table/bootstrap-table-export.js"
            th:src="@{plugins/bootstrap-table/bootstrap-table-export.js}"></script>
    <script src="../../static/plugins/bootstrap-table/tableExport.js"
            th:src="@{plugins/bootstrap-table/tableExport.js}"></script>


    <!-- formValidation -->
    <link rel="stylesheet" href="../../static/plugins/formValidation/formValidation.css"
          th:href="@{plugins/formValidation/formValidation.css}">
    <script src="../../static/plugins/formValidation/formValidation.js"
            th:src="@{plugins/formValidation/formValidation.js}"></script>
    <script src="../../static/plugins/formValidation/zh_CN.js"
            th:src="@{plugins/formValidation/zh_CN.js}"></script>
    <script src="../../static/plugins/formValidation/bootstrap.js"
            th:src="@{plugins/formValidation/bootstrap.js}"></script>

    <!-- summernote -->
    <link rel="stylesheet" href="../../static/plugins/summernote/summernote.css"
          th:href="@{plugins/summernote/summernote.css}">
    <script src="../../static/plugins/summernote/summernote.js"
            th:src="@{plugins/summernote/summernote.js}"></script>
    <script src="../../static/plugins/summernote/summernote-zh-CN.js"
            th:src="@{plugins/summernote/summernote-zh-CN.js}"></script>

    <!-- select2 -->
    <link rel="stylesheet" href="../../static/plugins/select2/select2.css"
          th:href="@{plugins/select2/select2.css}">
    <script src="../../static/plugins/select2/select2.js"
            th:src="@{plugins/select2/select2.js}"></script>
    <script src="../../static/plugins/select2/select2.full.js"
            th:src="@{plugins/select2/select2.full.js}"></script>

    <!-- bootstrap-switch -->
    <link rel="stylesheet" href="../../static/plugins/bootstrap-switch/bootstrap-switch.css"
          th:href="@{plugins/bootstrap-switch/bootstrap-switch.css}">
    <script src="../../static/plugins/bootstrap-switch/bootstrap-switch.js"
            th:src="@{plugins/bootstrap-switch/bootstrap-switch.js}"></script>


    <script>

        $(function () {

            initTable();

            $("#queryBtn").bind("click", initTable);


            // 清除模态框数据，让其重新加载
            $("#myModal").on("hidden.bs.modal", function () {
                $(this).removeData("bs.modal");
            });
        });

        function initTable() {
            //先销毁表格
            $('#myTable').bootstrapTable('destroy');

            $("#myTable").bootstrapTable({
                url: "api/blogs/",
                method: 'get',  // 必须用get，不然后台获取不到参数
                dataType: 'json',
                toolbar: '#toolbar',                //工具按钮用哪个容器
                checkboxHeader: true,
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                //strictSearch: true,
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                //minimumCountColumns: 10,             //当列数小于此值时，将隐藏内容列下拉框。
                clickToSelect: true,                //是否启用点击选中行
                // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                // uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                showExport: true,                     //是否显示导出
                exportDataType: "basic",              //basic', 'all', 'selected'.
                queryParams: function queryParams(params) {
                    var blog = {    // 变量名必须和controller处的变量名一致
                        //  pageSize: params.limit,   //页面大小
                        // pageNumber: params.pageNumber,  //页码
                        //sort: params.sort,  //排序列名
                        //sortOrder: params.order//排位命令（desc，asc）
                    };

                    return blog;
                },

                columns: [
                    {
                        checkbox: true,
                        align: 'center',
                        valign: 'middle'
                    }, {
                        field: 'dictName',
                        title: '所属类别',
                        align: 'center',
                        valign: 'middle',
                        sortale: true
                    }, {
                        field: 'title',
                        title: '标题',
                        //   formatter: function (value, row, index) {
                        //      return index+1;
                        // }
                    },
                    {
                        field: 'modifier',
                        title: '修改人',
                        align: 'center',
                        valign: 'middle',
                    }, {
                        field: 'createDate',
                        title: '创建时间',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return dateFormatter(value);
                        }
                    }, {
                        field: 'modifyDate',
                        title: '修改时间',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return dateFormatter(value);
                        }
                    }, {
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                            return [
                                ' <a href="../../blog/gotoBlogDetailPage?id=' + row.id + '" target=_blank><i class="fa fa-folder-open" style="margin-right:10px;"></i></a>' +
                                ' <a href="../../blog/gotoBlogSavePage?id=' + row.id + '" ><i class="fa fa-edit"></i></a>' +
                                '<a href="javascript:void();" onclick="doDelete(' + row.id + ", '${ctx}/blog/deleteBlogById'" + ')" class="btn btn-icon-only red"> <i class="fa fa-times"></i></a>',
                            ].join('');
                        }
                    }
                ],
            });
        }

        function doQuery() {
            $('#mytable').bootstrapTable('refresh');
        }


        function queryParams(params) {
            var param = {
                orgCode: $("#orgCode").val(),
                userName: $("#userName").val(),
                startDate: $("#startDate").val(),
                endDate: $("#endDate").val(),
                limit: this.limit, // 页面大小
                offset: this.offset, // 页码
                pageindex: this.pageNumber,
                pageSize: this.pageSize
            }
            return param;
        }


        function deleteTask() {
            if (confirm("are you sure"))
                return true;
            else
                return false;
        }


        function rowStyle(row, index) {
            var classes = ['active', 'success', 'info', 'warning', 'danger'];

            if (index % 2 === 0 && index / 2 < classes.length) {
                return {
                    classes: classes[index / 2]
                };
            }
            return {};
        }


    </script>

</head>
<body style="margin:100px">

<!-- 模态声明 -->
<div class="modal fade" id="myModal" tabindex="-1" data-keyboard="true">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明  发送请求，加载task_save.jsp的数据到modal-content中-->
        <div class="modal-content">
        </div>
    </div>
</div>

<div class="row base-margin" id="query">
    <!--
    <ol class="breadcrumb">
        <li><strong><span style="color: #27a0d7">用户列表</span></strong></li>
    </ol>
     -->
    <!--
<form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
    <div class="form-group">
        <label for="search_startTime" class="control-label">开始日期:</label>
        <input placeholder="开始日期" type="text" value="2016-06-07" class="form-control" id="search_startTime"
               name="search_startTime">
    </div>
    <div class="form-group">
        <label for="search_exceptTime" class="control-label">预期日期：</label>
        <input placeholder="预期日期" type="text" value="2017/07/08" class="form-control " id="search_exceptTime"
               name="search_exceptTime">
    </div>

    <div class="form-group">
        <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>
    </div>
    </form>
     -->
</div>

<div class="container">
</div>
<div id="toolbar" class="btn-group">
    <a id="btn_add" href="../../task/gotoTaskSavePage" type="button" class="btn btn-default" data-toggle="modal"
       data-target="#myModal">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    </a>
    <button id="btn_delete" type="button" class="btn btn-default" onclick="doDeletes('${ctx}/blog/deleteByIds')">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
    </button>
</div>
<table id="myTable"></table>


</body>
</html>